<script setup>
import { usernoteinfoGetService } from '@/api/user/note'
import { vegetableECharts } from '../../../utils/vegetableECharts.js'
import { plantingTimeECharts } from '../../../utils/plantingTimeECharts.js'
import { ref } from 'vue'
// 绘制图表
//useECharts('myEcharts')
vegetableECharts('vegetableECharts')
plantingTimeECharts('plantingTimeECharts')
const noteinfoview = ref([])

const getLandparcelreInfoList = async () => {
  const res = await usernoteinfoGetService()
  res.data.data.sort((a, b) => {
    // 将日期字符串转换为日期对象进行比较
    const dateA = new Date(a.date)
    const dateB = new Date(b.date)
    // 按日期的大小排序
    return dateB - dateA
  })
  noteinfoview.value = res.data.data
  const loggedIn = localStorage.getItem('loggedIn')
  console.log(loggedIn)
  if (loggedIn == null) {
    open()
  }
  // 在获取通知信息后调用打开通知的函数
}
getLandparcelreInfoList()
//通知弹窗
const open = () => {
  localStorage.setItem('loggedIn', 'true')
  // 检查通知信息是否为空
  if (noteinfoview.value.length > 0) {
    // 显示通知信息
    noteinfoview.value.forEach((note, index) => {
      // 显示每个通知信息
      setTimeout(() => {
        // 显示每个通知信息，并设置持续时间为 5000 毫秒（即 5 秒）
        ElNotification.success({
          title: `${note.title} -${note.date}`,

          offset: 300 + index // 增加垂直偏移量，以避免遮挡
          //position: 'bottom-right' // 设置通知位置为右下角
        })
      }, index * 100) // 每个通知之间延迟 1000 毫秒（即 1 秒）
    })
  } else {
    // 若通知信息为空，则显示默认提示
    ElNotification.error({
      title: '没有通知的信息',
      offset: 300
    })
  }
}
const truncateText = (text, maxLength) => {
  if (text.length > maxLength) {
    return text.slice(0, maxLength) + '...'
  }
  return text
}
</script>

<template>
  <div class="card-container">
    <div class="left-card">
      <el-card header="数据视图/业务流程" :body-style="{ height: '500px' }">
        <!-- 这里是左边卡片内容 -->
        <div class="item" :style="{ width: '100%', height: '100px' }">
          <el-steps style="max-width: 700px" :active="6" align-center>
            <el-step title="步骤 1" description="录入对应土地资源信息" />
            <el-step title="步骤 2" description="等待土地资源信息审核" />
            <el-step title="步骤 2" description="录入对应土地块信息" />
            <el-step title="步骤 3" description="录入对应菜地信息" />
            <el-step title="步骤 4" description="录入对应产量信息" />
            <el-step title="步骤 5" description="录入对应成本信息" />
          </el-steps>
        </div>
        <div class="container">
          <div
            class="item"
            :style="{ width: '100%', height: '170px' }"
            id="vegetableECharts"
          >
            <strong>菜地品种</strong>
          </div>
        </div>
        <div
          class="item"
          :style="{ width: '100%', height: '170px' }"
          id="plantingTimeECharts"
        ></div>
      </el-card>
    </div>
    <div class="right-card">
      <el-card header="通知" :body-style="{ height: '500px' }">
        <div class="right-card-container">
          <el-button type="info">标题</el-button>
          <el-tooltip
            effect="dark"
            placement="top"
            :content="button.title"
            v-for="(button, index) in noteinfoview"
            :key="button.index"
          >
            <router-link :to="'/notedetails/' + button.id">
              <el-button type="info" link style="margin-top: 10px">
                {{ index + 1 }}. {{ truncateText(button.title, 3) }}--{{
                  button.date
                }}
              </el-button>
            </router-link>
          </el-tooltip>
        </div>
      </el-card>
    </div>
  </div>
</template>

<style>
.right-card-container {
  display: flex;
  flex-direction: column; /* 在垂直方向上排列子元素 */
}
.item {
  width: 100px;
  height: 50px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: rgb(238, 241, 241);
  transition: all 0.3s ease; /* 添加过渡效果 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.item:hover {
  background-color: lightgreen; /* 鼠标悬停时改变背景颜色 */
  transform: scale(1.1); /* 鼠标悬停时放大 */
  cursor: pointer; /* 鼠标悬停时显示手型光标 */
}
.container {
  display: flex;
  justify-content: space-between;
}
.card-container {
  display: flex; /* 使用 Flex 布局 */
}

.left-card {
  flex: 8; /* 左边占据 80% 的宽度 */
  margin-right: 10px; /* 可选：设置左右间距 */
}

.right-card {
  flex: 2; /* 右边占据 20% 的宽度 */
}
</style>
